<template>
  <div class="main">
    <div class="main_bg" style="background: url('/static/imgs/mianbj.jpg');background-size: cover;">
      <div class="loginBox">
        <!-- signContent -->
        <div class="signContent">
          <div class="signContainer">
            <form action="" class="loginForm" id="form_key" data-module="smsFrom" onsubmit="return checkForm()">
              <!-- tab -->
              <div class="tabBox">
                <div class="tabBoxSwitch">
                  <ul class="tabBoxSwitchUl">
                    <li class="tab-active" data-id="0">密码登录</li>
                    <li data-id="1">用户注册</li>
                  </ul>
                  <div class="ercode_tab">
                      <el-link class="goIndex" type="primary" :underline="false" @click="goIndex()">主页</el-link>
                  </div>
                </div>
              </div>
              <!-- tabContent -->
              <div class="tabContent">
                <!-- tabContentPhone -->
                <div class="tabcont  tabContentPhone active">
                  <div class="tabcontent">
                    <label  class="inputLabel phoneLabel">
                      <el-input v-model="input" placeholder="请输入手机号或邮箱"></el-input>
                    </label>
                  </div>
                  <div class="tabcontent">
                    <label  class="inputLabel phoneLabel">
                     <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                    </label>
<!--                    <div class="phoneInputGroup">-->
<!--                      <label  class="inputLabel">-->
<!--                        <input type="number" value="" name="" id="msgInput"-->
<!--                               class="inputStyle msgInput" placeholder="输入 6 位短信验证码"-->
<!--                               autocomplete="off">-->
<!--                      </label>-->
<!--                    </div>-->
<!--                    <div class="phoneGroup">-->
<!--                      <button class="phone-btn msgBtn" type="button">-->
<!--                        获取短信验证码-->
<!--                      </button>-->
<!--                    </div>-->
                  </div>
                </div>
                <!-- tabContentAccount -->
                <div class="tabcont tabContentAccount">
                  <div class="tabcontent">
<!--                    <div class="login-out-phoneBox">-->
<!--                      <div class="phoneBox">-->
<!--                        <div class="phoneGroup">-->
<!--                          <button class="phone-btn selectBtn" type="button"-->
<!--                                  data-type="selected">-->
<!--                            <span>中国 +86</span>-->
<!--                            <svg class="Zi&#45;&#45;Select Select-arrow" fill="currentColor"-->
<!--                                 viewBox="0 0 24 24">-->
<!--                              <path-->
<!--                                  d="M12 16.183l2.716-2.966a.757.757 0 0 1 1.064.001.738.738 0 0 1 0 1.052l-3.247 3.512a.758.758 0 0 1-1.064 0L8.22 14.27a.738.738 0 0 1 0-1.052.758.758 0 0 1 1.063 0L12 16.183zm0-9.365L9.284 9.782a.758.758 0 0 1-1.064 0 .738.738 0 0 1 0-1.052l3.248-3.512a.758.758 0 0 1 1.065 0L15.78 8.73a.738.738 0 0 1 0 1.052.757.757 0 0 1-1.063.001L12 6.818z"-->
<!--                                  fill-rule="evenodd"></path>-->
<!--                            </svg>-->
<!--                          </button>-->
<!--                        </div>-->
<!--                        <div class="selectConentent">-->
<!--                          <div class="selectOptions">-->
<!--                          </div>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <span class="line-show"></span>-->
<!--                    </div>-->

                      <label  class="inputLabel phoneLabel">
                        <el-input v-model="input" placeholder="请输入手机号或邮箱"></el-input>
                      </label>
                  </div>
                  <div class="tabcontent">
                      <label  class="inputLabel phoneLabel">
                        <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                      </label>
                  </div>
                </div>
              </div>
              <!-- loginbox -->
              <div class="login_box">
                <button type="button" class="phone-btn voice-btn sms-voice-btn" data-btn="sms-voice-btn"
                        data-forV="forget-voice">忘记密码</button>
              </div>
              <button id="submit" type="submit" class="button fromSubmit"
                      data-type="smsSubmit">登录</button>
              <!-- tips -->
              <div class="SignContainer-tip">
                <div>
                  <div>未注册手机验证后自动登录，注册即代表同意<a href="#">《用户协议》</a><a href="#">《隐私保护指引》</a></div>
                </div>
              </div>
            </form>
            <!-- ercodeSgin -->
            <div class="ercodeSignBox">
<!--              <div class="ercode_tab switch-input">-->
<!--                <svg width="52" height="52" xmlns:xlink="http://www.w3.org/1999/xlink"-->
<!--                     fill="currentColor">-->
<!--                  <defs>-->
<!--                    <path id="id-14580708-a" d="M0 0h48a4 4 0 0 1 4 4v48L0 0z"></path>-->
<!--                  </defs>-->
<!--                  <g fill="none" fill-rule="evenodd">-->
<!--                    <mask id="id-14580708-b" fill="#fff">-->
<!--                      <use xlink:href="#id-14580708-a"></use>-->
<!--                    </mask>-->
<!--                    <use fill="#0084FF" xlink:href="#id-14580708-a"></use>-->
<!--                    <path fill="#FFF"-->
<!--                          d="M22.125 4h13.75A4.125 4.125 0 0 1 40 8.125v27.75A4.125 4.125 0 0 1 35.875 40h-13.75A4.125 4.125 0 0 1 18 35.875V8.125A4.125 4.125 0 0 1 22.125 4zm6.938 34.222c1.139 0 2.062-.945 2.062-2.11 0-1.167-.923-2.112-2.063-2.112-1.139 0-2.062.945-2.062 2.111 0 1.166.923 2.111 2.063 2.111zM21 8.333v24h16v-24H21z"-->
<!--                          mask="url(#id-14580708-b)"></path>-->
<!--                    <g mask="url(#id-14580708-b)">-->
<!--                      <path fill="#FFF"-->
<!--                            d="M46.996 15.482L39 19.064l-7.996-3.582A1.6 1.6 0 0 1 32.6 14h12.8a1.6 1.6 0 0 1 1.596 1.482zM47 16.646V24.4a1.6 1.6 0 0 1-1.6 1.6H32.6a1.6 1.6 0 0 1-1.6-1.6v-7.754l8 3.584 8-3.584z">-->
<!--                      </path>-->
<!--                      <path fill="#0084FF" d="M31 15.483v1.17l8 3.577 8-3.577v-1.17l-8 3.581z"-->
<!--                            fill-rule="nonzero"></path>-->
<!--                    </g>-->
<!--                  </g>-->
<!--                </svg>-->
<!--              </div>-->
              <!-- ercodeConent -->
<!--              <div class="ercodeContent">-->
<!--                <div class="Qrcode-title">扫码登录</div>-->
<!--                <div class="ercodeBox">-->
<!--                  <div class="Qrcode-img" id="qrcode">-->
<!--                    &lt;!&ndash; <img width="150" height="150" src="../img/image.png" alt="二维码"> &ndash;&gt;-->
<!--                  </div>-->
<!--                  <p>打开<a href="#" target="_blank" rel="noopener noreferrer">-->
<!--                    乎乎 App</a></p>-->
<!--                  <p>在「我的」页面右上角打开扫一扫</p>-->
<!--                </div>-->
<!--              </div>-->
            </div>
          </div>

        </div>
        <!--  -->
        <div class="css-1hmxk26"></div>
        <!-- signSocial -->
        <div class="footSign signSocial">
          <span class="social-title">社交帐号登录</span>
          <span class="Login-socialButtonGroup">
              <button type="button" class="button Login-socialButton">
                  <svg class="Zi Zi--WeChat Login-socialIcon" fill="#60c84d" viewBox="0 0 24 24" width="20"
                       height="20">
                      <path
                          d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                          fill-rule="evenodd"></path>
                  </svg>
                  微信
              </button>
              <button type="button" class="button Login-socialButton ">
                  <svg class="Zi Zi--QQ Login-socialIcon" fill="#50c8fd" viewBox="0 0 24 24" width="20"
                       height="20">
                      <path
                          d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                          fill-rule="evenodd">
                      </path>
                  </svg>
                  QQ
              </button>
              <button type="button" class="button Login-socialButton">
                  <svg class="Zi Zi--Weibo Login-socialIcon" fill="#fb6622" viewBox="0 0 24 24" width="20"
                       height="20">
                      <path fill="#FB6622"
                            d="M15.518 3.06c8.834-.854 7.395 7.732 7.394 7.731-.625 1.439-1.673.309-1.673.309.596-7.519-5.692-6.329-5.692-6.329-.898-1.067-.029-1.711-.029-1.711zm4.131 6.985c-.661 1.01-1.377.126-1.376.126.205-3.179-2.396-2.598-2.396-2.598-.719-.765-.091-1.346-.091-1.346 4.882-.551 3.863 3.818 3.863 3.818zM5.317 7.519s4.615-3.86 6.443-1.328c0 0 .662 1.08-.111 2.797.003-.003 3.723-1.96 5.408.159 0 0 .848 1.095-.191 2.649 0 0 2.918-.099 2.918 2.715 0 2.811-4.104 6.44-9.315 6.44-5.214 0-8.026-2.092-8.596-3.102 0 0-3.475-4.495 3.444-10.33zm10.448 7.792s.232-4.411-5.71-4.207c-6.652.231-6.579 4.654-6.579 4.654.021.39.097 3.713 5.842 3.713 5.98 0 6.447-4.16 6.447-4.16zm-9.882.86s-.059-3.632 3.804-3.561c3.412.06 3.206 3.165 3.206 3.165s-.026 2.979-3.684 2.979c-3.288 0-3.326-2.583-3.326-2.583zm2.528 1.037c.672 0 1.212-.447 1.212-.998 0-.551-.543-.998-1.212-.998-.672 0-1.215.447-1.215.998 0 .551.546.998 1.215.998z"
                            fill-rule="evenodd">
                      </path>
                  </svg>
                  微博
              </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/login/css/login_ercode.css";
import $ from 'jquery';
import {qrcodeJS} from "../../assets/login/js/qrcode";
import {loginJS} from "../../assets/login/js/login";

export default {
  name: "login",
  data() {
    return {
      input: '',
      password: ''
    }
  },
  methods:{
    goIndex(){
      this.$router.push('/');
    }
  },
  created() {
    this.$nextTick(() =>{
      qrcodeJS();
      loginJS();
    })
  }
}


</script>

<style scoped>
.goIndex{
  margin-top: 18px;
  font-size: 18px;
  font-weight: 800;
}
</style>